<!--食品工厂用户可见-->
<template>
  <div>
    <el-tabs type="border-card" style="margin-top: 50px;margin-left: 10px">
      <el-tab-pane label="未读">
        <!--        这边是未读卡片-->
        <el-table
          v-loading="loading"
          :data="unread_tableData"
          style="width: 100%"
          max-height="700px"
        >
          <!--          :default-sort="{prop: 'num', order: 'ascending'}"-->
          <el-table-column fixed type="index" label="序号" width="50" />
          <el-table-column fixed prop="name" label="反馈人姓名" width="100" />
          <el-table-column prop="sex" label="反馈人性别" width="100" />
          <el-table-column prop="identify" label="身份证号" width="200" />
          <el-table-column prop="tel" label="联系电话" width="150" />
          <el-table-column prop="email" label="电子邮件" width="200" />
          <el-table-column prop="address" label="固定地址" width="200" />
          <el-table-column prop="productCode" label="产品溯源码" width="150" />
          <el-table-column prop="productName" label="产品名称" width="150" />
          <el-table-column prop="feedbackInfo" label="反馈信息" width="500" />
          <el-table-column fixed="right" label="状态" width="100">
            <template #default="scope">
              <el-button
                link
                type="danger"
                size="small"
                @click.prevent="read(scope.row.identify)"
              >
                未读
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-footer>
          <el-pagination
            background
            align="right"
            :current-page="unread_currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="unread_pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="unread_total"
            @size-change="unread_handleSizeChange"
            @current-change="unread_handleCurrentChange"
          />
        </el-footer>
      </el-tab-pane>
      <el-tab-pane label="已读">
        <!--        这里是已读卡片-->
        <el-row>
          <el-col :span="4"><div class="grid-content bg-purple">
            <el-button type="danger" disabled>批量删除</el-button>
          </div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple-light">
            <template>
              <download-excel
                class="export-excel-wrapper"
                :data="read_tableData"
                :header="title"
                name="消费者反馈信息表.xls"
              >
                <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
                <el-button type="success" icon="el-icon-upload2">导出数据</el-button>
              </download-excel>
            </template>
          </div></el-col>
          <el-col :span="4"><div class="grid-content bg-purple">
            <el-button type="primary" icon="el-icon-refresh" @click="load()">刷新</el-button>
          </div></el-col>

        </el-row>
        <el-table
          v-loading="loading"
          :data="read_tableData"
          style="width: 100%"
          max-height="700px"
        >
          <el-table-column fixed type="index" label="序号" width="50" />
          <el-table-column fixed prop="name" label="反馈人姓名" width="100" />
          <el-table-column prop="sex" label="反馈人性别" width="100" />
          <el-table-column prop="identify" label="身份证号" width="200" />
          <el-table-column prop="tel" label="联系电话" width="150" />
          <el-table-column prop="email" label="电子邮件" width="200" />
          <el-table-column prop="address" label="固定地址" width="200" />
          <el-table-column prop="productCode" label="产品溯源码" width="150" />
          <el-table-column prop="productName" label="产品名称" width="150" />
          <el-table-column prop="feedbackInfo" label="反馈信息" width="500" />
          <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
              <el-button
                link
                type="success"
                size="small"
                @click.prevent="doubleRead"
              >
                已读
              </el-button>
              <el-button
                link
                type="danger"
                size="small"
                @click.prevent="deleteRow (scope.row.identify)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-footer>
          <el-pagination
            background
            align="right"
            :current-page="read_currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="read_pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="read_total"
            @size-change="read_handleSizeChange"
            @current-change="read_handleCurrentChange"
          />
        </el-footer>
      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script>

import request from '@/request'

export default {
  name: 'FeedbackManagement',
  data() {
    return {
      title: '反馈信息',
      loading: false,
      unread_currentPage: 1, // 当前页码
      read_currentPage: 1,
      unread_total: 0, // 总条数
      read_total: 0,
      unread_pageSize: 10, // 每页的数据条数
      read_pageSize: 10,
      read_tableData: [], // 已读表
      unread_tableData: []// 未读表
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.loading = true
      request.get('/unReadFeedbackSurper/pageAll', {
        params: {
          pageNum: this.unread_currentPage,
          pageSize: this.unread_pageSize
        }
      }).then(res => {
        setTimeout(() => {
          this.loading = false
        }, 300)
        this.$notify({
          type: 'success',
          message: '读取成功!',
          offset: 70
        })
        this.unread_tableData = res.data.records
        this.unread_total = res.data.total
      })
      request.get('readFeedbackSurper/pageAll', {
        params: {
          pageNum: this.read_currentPage,
          pageSize: this.read_pageSize
        }
      }).then(res => {
        setTimeout(() => {
          this.loading = false
        }, 300)
        this.read_tableData = res.data.records
        this.read_total = res.data.total
        console.log(res)
      })
    },
    doubleRead() {
      this.$message({
        type: 'success',
        message: '好啦好啦，知道你已经读过了哈'
      })
    },
    // 每页条数改变时触发 选择一页显示多少行
    unread_handleSizeChange(pageSize) {
      this.unread_pageSize = pageSize
      this.load()
    },
    // 当前页改变时触发 跳转其他页
    unread_handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      console.log(val)
      this.unread_currentPage = val
      this.load()
    },
    read_handleSizeChange(pageSize) {
      // console.log(`每页 ${val} 条`);
      this.read_pageSize = pageSize
      this.load()
    },
    // 当前页改变时触发 跳转其他页
    read_handleCurrentChange(val) {
      this.read_currentPage = val
      this.load()
    },
    deleteRow(indentify) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete('/readFeedbackSurper/delById/' + indentify).then(res => {
          if (res.code === 20000) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.load()
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    read(identify) {
      request.get('/unReadFeedbackSurper/read/' + identify).then(res => {
        if (res.code === 20000) {
          this.$message({
            type: 'success',
            message: '已读！'
          })
          this.load()
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    }
  }

}
</script>

<style scoped>

</style>
